<template>
  <div class="mine">
    <div class="mine-head">
      <div class="mine-head-card">
        <div class="touxiang">
          <img
            src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/avatar.jpg"
          />
          <p>{{list.nickname}} <van-icon name="edit" @click="gotopersonal" /></p>
          <p class="nr"><span>去约课</span></p>
        </div>
        <div class="mine-nav">
          <ul>
            <li>
              <p class="p1">1</p>
              <p class="p2">我的特色课</p>
              <p class="p3">已购特色课程的学习</p>
            </li>
            <li>
              <p class="p1">0</p>
              <p class="p2">一对一辅导</p>
              <p class="p3">我的一对一老师辅导</p>
            </li>
            <li>
              <p class="p1">0.00</p>
              <p class="p2">剩余学习币</p>
              <p class="p3">查看剩余学习币</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="mine-box" @click="show = !show">
      <van-icon name="description" size="40" />
      <div>
        <p>邀请好友注册APP，享多重好礼</p>
        <p>限时特惠，多邀多得</p>
      </div>
    </div>
    <div class="mine-list">
      <p>课程相关</p>
      <van-grid>
        <van-grid-item icon="/下载1.png" text="关注的老师" to="/myfollow" />
        <van-grid-item icon="/下载2.png" text="我的收藏" to="/Collection" />
      </van-grid>
    </div>
    <div class="mine-list">
      <p>订单相关</p>
      <van-grid>
        <van-grid-item icon="/下载3.png" text="课程订单" to="/curriculum" />
        <van-grid-item icon="/下载3.png" text="会员订单" to="/memberorder" />
        <van-grid-item icon="/下载3.png" text="约课订单" to="/Appointment" />
      </van-grid>
    </div>
    <div class="mine-list">
      <p>我的账户</p>
      <van-grid>
        <van-grid-item icon="/下载4.png" text="优惠券" to="/coupon" />
        <van-grid-item icon="/下载5.png" text="学习卡" to="/Studycard" />
        <van-grid-item icon="/下载6.png" text="会员" to="/member" />
      </van-grid>
    </div>
    <div class="mine-list">
      <p>自助服务</p>
      <van-grid>
        <van-grid-item icon="/下载7.png" text="我的消息" />
        <van-grid-item icon="/下载8.png" text="意见反馈" />
        <van-grid-item icon="/下载9.png" text="在线客服" />
        <van-grid-item icon="/下载10.png" text="设置" @click="gotoedit" />
      </van-grid>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <img src="/bg.png" class="block" @click="show = !show" />
      </div>
    </van-overlay>
    <div class="btm"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      list:[]
    };
  },
  mounted() {
    this.getuserInfo()
  },
  methods: {
    gotoedit() {
      this.$router.push({ path: "/edit" });
    },
    gotopersonal() {
      this.$router.push({ path: "/personal" });
    },
    getuserInfo() {
      this.$API.userInfo().then((res) => {
        console.log(res);
        this.list = res.data.data;
        // console.log(this.xueke);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.mine {
  background: #f0f2f5;
}
.mine-head {
  width: 100%;
  height: 58vw;
  position: relative;
  //   padding: 0 4vw;
  background: url(../../assets/1.png) no-repeat top;
  background-size: 100%;
  background-color: #fff;
  .mine-head-card {
    background-color: rgb(118, 83, 17);
    height: 46vw;
    background-color: #fff;
    width: 92vw;
    border-radius: 30px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    .touxiang {
      display: flex;
      align-items: center;
      padding: 16px 0 0 16px;
      font-size: 33px;
      position: relative;
      overflow: hidden;
      img {
        width: 16vw;
        height: 16vw;
        border-radius: 50%;
        margin-right: 20px;
      }
      .nr {
        background-color: #eb6100;
        color: white;
        border-radius: 15%;
        width: 2rem;
        height: 0.8rem;
        line-height: 0.8rem;
        text-indent: 0.2rem;
        position: absolute;
        right: -17px;
      }
    }
    .mine-nav {
      width: 100%;
      margin-top: 0.8rem;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          text-align: center;
          .p1 {
            color: #eb6100;
            font-size: 0.6rem;
          }
          .p2 {
            font-size: 3.73333vw;
            color: #595959;
          }
          .p3 {
            color: #b7b7b7;
          }
        }
      }
    }
  }
}
.mine-box {
  width: 92vw;
  height: 1.5rem;
  background-color: #f0873c;
  margin: 0.3rem auto;
  color: white;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  padding: 20px 20px;
  box-sizing: border-box;
  .van-icon {
    margin-right: 10px;
  }
}
.mine-list {
  width: 100vw;
  margin: 0.4rem 0;
  background-color: white;
  padding: 0 4vw 0 4vw;
  box-sizing: border-box;
  font-size: 0.48rem;
  border-bottom: 0.03rem solid #ccc;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.5rem;
}

.block {
  width: 80%;
}
.btm {
  height: 10vw;
}
</style>